<template>
  <div class="pie-chart" ref="chartContainer"></div>
</template>

<script>
import * as echarts from "echarts";

export default {
  name: "PieChart",
  data() {
    return {
      echartData: [
      ],
      color: [
        [
          { offset: 0, color: "#00BD7E" },
          { offset: 1, color: "#00BD7E" },
        ],
        [
          { offset: 0, color: "#FFA254" },
          { offset: 1, color: "#FFA254" },
        ],
        [
          { offset: 0, color: "#00C4E1" },
          { offset: 1, color: "#00C4E1" },
        ],
        [
          { offset: 0, color: "#1754F5" },
          { offset: 1, color: "#1754F5" },
        ],
      ],
    };
  },
  mounted() {
    this.fetchData();
  },
  methods: {
    async fetchData() {
      try {
        const response = await this.$axios.post("/api/survey/case");
        const data = response.data.data.categories;
        this.echartData = data;
        this.initChart();
      } catch (error) {
        console.error(error);
      }
    },
    initChart() {
      const chartContainer = this.$refs.chartContainer;
      const myChart = echarts.init(chartContainer);
      this.echartData.forEach((item, index) => {
        item.itemStyle = {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, this.color[index]),
        };
      });

      // 设置图表配置
      const option = {
        color: this.color,
        title: [
          {
            show :false,
            text: "数据总量",
            textStyle: {
              color: "#fff",
              fontSize: 12,
              align: "center",
            },
            x: "44%",
            y: "40%",
          },
          {
            show :false,

            subtext:
              this.echartData &&
              this.echartData.reduce((prev, cur) => {
                return prev + cur.value;
              }, 0),
            subtextStyle: {
              fontSize: 15,
              color: ["#FFF"],
              // align: "center",
            },
            x: "38%",
            y: "43%",
          }
        ],
        // title: {
        //   text: "数据总量",


        //   subtext:
        //     this.echartData &&
        //     this.echartData.reduce((prev, cur) => {
        //       return prev + cur.value;
        //     }, 0),
        //   textStyle: {
        //     color: "#fff",
        //     fontSize: 12,
        //     // align: "center",
        //   },
        //   subtextStyle: {
        //     fontSize: 15,
        //     color: ["#FFF"],
        //     // align: "center",

        //   },
        //   x: "44%",
        //   y: "39%",
        // },
        series: [
          {
            type: "pie",
            minAngle: 5,
            startAngle: 10, // 起始角度
            labelLine: {
              show: true,
              length: 30,
              length2: 50,
              lineStyle: {
                width: 2,
              },
            },
            label: {
              formatter: (params) => {
                const name = params.name;
                return `{f${params.dataIndex + 1}|${name}}\n{t|${params.data.progress + '% ' + params.value}}`;
              },
              rich: {
                t: {
                  color: "#FFF",
                  lineHeight: 20,
                  fontSize: 15,
                  align: "left",
                },
                f1: {
                  color: "#FF8B55",
                  fontSize: 15,
                  align: "center",
                  lineHeight: 28,
                },
                f2: {
                  color: "#6DBEFF",
                  fontSize: 15,
                  align: "center",
                  lineHeight: 28,
                },
                f3: {
                  color: "#28F2E7",
                  fontSize: 15,
                  align: "center",
                  lineHeight: 28,
                },
                f4: {
                  color: "#1754F5",
                  fontSize: 15,
                  align: "center",
                  lineHeight: 28,
                },
              },
            },
            center: ["50%", "50%"],
            radius: ["50%", "30%"],
            data: this.echartData,
          },
        ],
      };

      myChart.setOption(option);

      // 监听窗口大小变化，自动调整图表大小
      window.addEventListener("resize", () => myChart.resize());
    },
  },
  beforeDestroy() {
    if (this.chartInstance) this.chartInstance.dispose();
  },
};
</script>

<style scoped>
.pie-chart {
  width: 500px;
  height: 200px;
}
</style>
